<template>
  <div class="app-box">
    <!-- 头部-->
    <headerCom></headerCom>
    <div class="main-box">
      <main class="">
        <div class="title-box">
          都在用的企业查询平台
        </div>
        <div class="search-box">
          <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="comanyName" class="input-with-select"
                      @keyup.enter.native="searchCom">
              <el-button slot="append" type="primary" class="btn-color" @click="searchCom">搜索企业</el-button>
            </el-input>
          </div>
        </div>
      </main>
    </div>
    <footer-index class="footer"></footer-index>
  </div>
</template>
<script>
import headerCom from "@/components/headerCom/index.vue";
import FooterIndex from "@/components/footerCom/index.vue";

export default {
  name: "indexPage",
  components: {
    FooterIndex,
    headerCom
  },
  data() {
    return {
      comanyName: '',
    }
  },
  methods: {
    searchCom() {
      let obj = {
        companName: this.comanyName,
        type: 1
      }
      this.$router.push({path: '/entcompy', query: {obj}})
    },
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.app-box {
  background-image: url("/src/assets/banner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 100%;
}

main {
  margin: 0 auto;

  width: 80%;

}

.title-box {
  margin: 60px 0;
  text-align: center;
  color: white;
  font-size: 46px;
  font-weight: 700;
}


.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.search-box {
  margin: 0 auto;
  width: 80%;
}

@media screen and (max-width: 600px) {
  ::v-deep .el-input-group__append {
    background-color: rgb(64, 158, 255) !important;
    color: white !important;
    border: none;
    padding: 0 5px;
    font-size: 12px;
  }

}

::v-deep .el-input-group__append {
  background-color: rgb(64, 158, 255) !important;
  color: white !important;
  border: none;
  width: 50px;

  .el-button--primary {
    padding-left: 15px !important;
  }
}

.footer {
  font-size: 14px;
  color: #ffffff;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 302;
  height: 39px;
  padding-top: 1px;
  zoom: 1;
  margin: 0;
  line-height: 39px;
}

@media screen and (max-width: 1000px) {
  /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
  .title-box {
    margin: 60px 0;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .footer {
    font-size: 12px;
    color: #ffffff;
    width: 100%;
  }
}

</style>